<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>KidsTube</title>
	<link rel="stylesheet" href="framework/jquery.mobile-1.0rc3.min.css" />
	<link rel="stylesheet" href="css/style.css" />
	<script type="text/javascript" src="framework/jquery-1.5.min.js"></script>
	<script type="text/javascript" src="js/page_event.js"></script>
	<script type="text/javascript" src="framework/jquery.mobile-1.0rc3.min.js"></script>
	<script language="javascript">
	<!--
		
		function Init()
		{
			More();
		}
		
		function More()
		{
			var response = "";
			$list = $("#list");
			
			$.getJSON("https://gdata.youtube.com/feeds/api/users/snkidstube/playlists?v=2&alt=jsonc&max-results=50", function(data)
			{  
				// Json sorting
				data.data.items.sort(function(a, b)
				{
					return (a.title < b.title) ? -1 : (a.title > b.title) ? 1 : 0;	
				});
				
				$.each(data.data.items, function(i, item) 
				{
					response += '<li style="padding:4px 0">';
					response += '<a href="cate_list.html#' + item['id'] + '" data-ajax="false" style="font-size:14px">' + item['title'] + '<span class="ui-li-count">' + item['size'] + '</span></a>';
					response += '</li>'
        		});

				if(response != "")
				{
					$(response).appendTo($list);
					$("#list").listview("refresh");
				}
	
			});
		}
	-->
	</script>
</head>
<body>
	<div data-role="page" id="home">
		<div class="content" data-role="content">
			<ul data-role="listview" data-inset="true" id="list">
			</ul>
		</div>
	</div>
</body>
</html>
